<script setup lang="ts">
import {FriendDTO, Group, UserInfo} from 'common';
import { PropType } from 'vue';

defineProps({
  userInfo:{
    type: Object as PropType<UserInfo|FriendDTO|Group>,
    required: true
  }
})
</script>

<template>
<div class="member-item">
  <v-avatar :image="userInfo.avatar" size="36" rounded="0"></v-avatar>
  <div class="name">{{userInfo.name}}</div>
</div>
</template>

<style scoped lang="scss">
.member-item{
  padding: 10px;
  display: flex;
  gap: 20px;
  cursor: pointer;
  .name{
    flex: 1;
    line-height: 36px;
  }
  &:hover{
    background: rgba(88,88,88,0.1);
  }
}
</style>